<template>
  <q-page class="bg-[#FAFCFF] ud-home-page">
    <div class="ud-card-box flex px-[1%] justify-between align-center h-[160px]">
      <q-card flat class="w-[30%] rounded-lg">
        <q-card-section>待办事项</q-card-section>
        <q-separator inset />
        <q-card-section class="flex justify-around">
          <div class="text-center">
            <p class="text-[32px]">12</p>
            <p class="text-sm text-[#A2AEC3] font-normal">维修单</p>
          </div>
          <div class="text-center">
            <p class="text-[32px]">6</p>
            <p class="text-sm text-[#A2AEC3] font-normal">投诉建议</p>
          </div>
          <div class="text-center">
            <p class="text-[32px]">8</p>
            <p class="text-sm text-[#A2AEC3] font-normal">房租逾期</p>
          </div>
        </q-card-section>
      </q-card>
      <q-card flat class="w-[42%] rounded-lg">
        <q-card-section class="flex justify-between">
          近一年租金总览
          <q-select
            class="w-50"
            outlined
            v-model="curDate"
            :options="dates"
            dense
            options-dense></q-select>
        </q-card-section>
        <q-separator inset />
        <q-card-section class="flex gap-2">
          <div class="flex-1 flex gap-2 flex-nowrap flex-center">
            <img src="@/assets/images/payment.png" />
            <div>
              <p class="text-[20px] text-[#666] font-semibold">{{ payments[0] }}</p>
              <p class="text-sm text-[#A2AEC3] font-normal">总计收款（元）</p>
            </div>
          </div>
          <div class="flex-1 flex gap-2 flex-nowrap flex-center">
            <div class="ud-pend-payment-box flex flex-center">
              <img src="@/assets/images/money.png" />
            </div>
            <div>
              <p class="text-[20px] text-[#666] font-semibold">{{ payments[1] }}</p>
              <p class="text-sm text-[#A2AEC3] font-normal">待收款（元）</p>
            </div>
          </div>
          <div class="flex-1 flex gap-2 flex-nowrap flex-center">
            <img src="@/assets/images/receive_payment.png" />
            <div>
              <p class="text-[20px] text-[#666] font-semibold">{{ payments[2] }}</p>
              <p class="text-sm text-[#A2AEC3] font-normal">已交租/总数（户）</p>
            </div>
          </div>
        </q-card-section>
      </q-card>
      <q-card flat class="w-[24%] flex flex-center rounded-lg">建设中...</q-card>
    </div>
    <div class="flex align-center py-[2%] px-[1%] justify-between">
      <q-card flat class="w-[30%]">
        <q-card-section class="flex justify-between items-center">
          待办明细（4）
          <TextSegment :labels="detailLabels" />
        </q-card-section>
        <q-separator inset />
        <q-list class="home-detail-box">
          <q-item class="py-2">
            <q-item-section class="w-[100px] flex-none">
              <q-chip
                class="ud-fix-order"
                color="red-1"
                text-color="red-12"
                icon="bi-wrench-adjustable">
                维修订单
              </q-chip>
              <p class="text-sm text-[#A2AEC3] mt-2 mb-0">2025/02/12</p>
              <p class="text-sm text-[#A2AEC3]">12:03:32</p>
            </q-item-section>
            <q-separator inset vertical class="mx-4" />
            <q-item-section>
              <p class="text-lg mb-0">有新的维修单</p>
              <p class="text-sm text-[#A2AEC3] my-2">5002号房 · 冰箱</p>
              <div>
                <p
                  class="text-sm text-[#2265D4] mb-0 cursor-pointer py-1 px-3 border border-[#DEE3ED] border-solid inline-block">
                  支处理
                </p>
              </div>
            </q-item-section>
          </q-item>
          <q-separator inset />
          <q-item class="py-2">
            <q-item-section class="w-[100px] flex-none">
              <q-chip class="ud-fix-order" color="red-1" text-color="red-12" icon="bi-clock">
                房租逾期
              </q-chip>
              <p class="text-sm text-[#A2AEC3] mt-2 mb-0">2025/02/12</p>
              <p class="text-sm text-[#A2AEC3]">12:03:32</p>
            </q-item-section>
            <q-separator inset vertical class="mx-4" />
            <q-item-section>
              <p class="text-lg mb-0">房租逾期未缴纳</p>
              <p class="text-sm text-[#A2AEC3] my-2">5002号房 · 3月 · 8789.0</p>
              <div>
                <p
                  class="text-sm text-[#2265D4] mb-0 cursor-pointer py-1 px-3 border border-[#DEE3ED] border-solid inline-block">
                  发送消息提醒
                </p>
              </div>
            </q-item-section>
          </q-item>
          <q-separator inset />
          <q-item class="py-2">
            <q-item-section class="w-[100px] flex-none">
              <q-chip class="ud-fix-order" color="blue-1" text-color="blue-13" icon="bi-bell">
                交租提醒
              </q-chip>
              <p class="text-sm text-[#A2AEC3] mt-2 mb-0">2025/02/12</p>
              <p class="text-sm text-[#A2AEC3]">12:03:32</p>
            </q-item-section>
            <q-separator inset vertical class="mx-4" />
            <q-item-section>
              <p class="text-lg mb-0">25日请前往批量发送交租提醒</p>
              <p class="text-sm text-[#A2AEC3] my-2">5002号房 · 冰箱</p>
              <div>
                <p
                  class="text-sm text-[#2265D4] mb-0 cursor-pointer py-1 px-3 border border-[#DEE3ED] border-solid inline-block">
                  支处理
                </p>
              </div>
            </q-item-section>
          </q-item>
          <q-separator inset />
          <q-item class="py-2">
            <q-item-section class="w-[100px] flex-none">
              <q-chip class="ud-fix-order" color="red-1" text-color="red-12" icon="bi-clock">
                投诉建议
              </q-chip>
              <p class="text-sm text-[#A2AEC3] mt-2 mb-0">2025/02/12</p>
              <p class="text-sm text-[#A2AEC3]">12:03:32</p>
            </q-item-section>
            <q-separator inset vertical class="mx-4" />
            <q-item-section>
              <p class="text-lg mb-0">投诉内容投诉内容</p>
              <p class="text-sm text-[#A2AEC3] my-2">5002号房 · 冰箱</p>
              <div>
                <p
                  class="text-sm text-[#2265D4] mb-0 cursor-pointer py-1 px-3 border border-[#DEE3ED] border-solid inline-block">
                  支处理
                </p>
              </div>
            </q-item-section>
          </q-item>
          <q-separator inset />
          <q-item class="py-2">
            <q-item-section class="w-[100px] flex-none">
              <q-chip class="ud-fix-order" color="red-1" text-color="red-12" icon="bi-clock">
                房租逾期
              </q-chip>
              <p class="text-sm text-[#A2AEC3] mt-2 mb-0">2025/02/12</p>
              <p class="text-sm text-[#A2AEC3]">12:03:32</p>
            </q-item-section>
            <q-separator inset vertical class="mx-4" />
            <q-item-section>
              <p class="text-lg mb-0">房租逾期未缴纳</p>
              <p class="text-sm text-[#A2AEC3] my-2">5002号房 · 冰箱</p>
              <div>
                <p
                  class="text-sm text-[#2265D4] mb-0 cursor-pointer py-1 px-3 border border-[#DEE3ED] border-solid inline-block">
                  发送消息提醒
                </p>
              </div>
            </q-item-section>
          </q-item>
          <q-separator inset />
          <q-item class="py-2">
            <q-item-section class="w-[100px] flex-none">
              <q-chip class="ud-fix-order" color="red-1" text-color="red-12" icon="bi-clock">
                房租逾期
              </q-chip>
              <p class="text-sm text-[#A2AEC3] mt-2 mb-0">2025/02/12</p>
              <p class="text-sm text-[#A2AEC3]">12:03:32</p>
            </q-item-section>
            <q-separator inset vertical class="mx-4" />
            <q-item-section>
              <p class="text-lg mb-0">房租逾期未缴纳</p>
              <p class="text-sm text-[#A2AEC3] my-2">5002号房 · 冰箱</p>
              <div>
                <p
                  class="text-sm text-[#2265D4] mb-0 cursor-pointer py-1 px-3 border border-[#DEE3ED] border-solid inline-block">
                  发送消息提醒
                </p>
              </div>
            </q-item-section>
          </q-item>
        </q-list>
      </q-card>
      <div class="w-[68%] flex flex-col gap-6">
        <q-card flat class="flex-1">
          <q-card-section class="flex justify-between items-center">
            租金趋势
            <TextSegment :labels="trendLabels" />
          </q-card-section>
          <q-separator inset />
          <q-card-section>
            <img class="w-full" src="@/assets/images/trend.jpg" />
          </q-card-section>
        </q-card>
        <div class="flex-1 flex gap-6">
          <q-card flat class="flex-1 rounded-lg">
            <q-card-section>维修统计</q-card-section>
            <q-separator inset />
            <q-card-section class="flex flex-center">
              <img class="w-[80%]" src="@/assets/images/repair.jpg" />
            </q-card-section>
          </q-card>
          <q-card flat class="flex-1 rounded-lg">
            <q-card-section class="flex justify-between">投诉统计</q-card-section>
            <q-separator inset />
            <q-card-section class="flex flex-center">
              <img class="w-[80%]" src="@/assets/images/tousu.jpg" />
            </q-card-section>
          </q-card>
          <q-card flat class="flex-1 flex flex-center rounded-lg">建设中...</q-card>
        </div>
      </div>
    </div>
  </q-page>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue'
  import TextSegment from 'components/TextSegment.vue'

  const curDate = ref('2025年3月')
  const dates = ref(['2025年3月', '2025年2月', '2025年1月'])
  const paymentMoney: Record<string, string[]> = {
    '2025年1月': ['29380', '10000', '100/466'],
    '2025年2月': ['39380', '8000', '200/500'],
    '2025年3月': ['49380', '7000', '500/666']
  }
  const payments = computed(() => {
    return paymentMoney[curDate.value] || []
  })

  const detailLabels = ref(['全部', '维修订单', '房租逾期', '投诉建议'])
  const trendLabels = ref(['年', '月', '周'])
</script>
<style scoped>
  .ud-home-page {
    font-family:
      PingFangSC,
      PingFang SC,
      Microsoft YaHei,
      Arial;
    font-weight: 500;
    font-size: 16px;
    color: #333;
  }
  .ud-card-box p {
    margin: 0;
    padding: 0;
  }
  .ud-card-box {
    background: url('@/assets/images/head_bg.png') no-repeat;
  }
  .ud-pend-payment-box {
    width: 50px;
    height: 50px;
    background: linear-gradient(317deg, #f44874 0%, #ff4569 100%);
    border-radius: 6px;
  }
  .ud-fix-order :deep(.q-chip__icon) {
    font-size: 1em;
    margin-right: 8px;
  }
  @media screen and (max-width: 1470px) {
    .ud-home-page {
      font-size: 14px;
    }
    .ud-text-segment-box {
      font-size: 12px;
    }
    .ud-text-segment-box :deep(.mx-2\.5) {
      margin-left: 4px;
      margin-right: 4px;
    }
  }
</style>
